<template>
  <div id="baseButton">
    <BaseTable
      :has-index="true"
      :has-border="true"
      :selection-show="false"
      :table-data="tableData"
      :table-data-total="total"
      :table-column-options="tableColumnOptions"
      @tableUpdate="tableUpdate"
      @selectionChange="selectionChange"
    />
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import { getAccountList } from '@/api/account'
export default {
  components: {
    BaseTable
  },
  data () {
    return {
      // 表格组件--模拟数据
      tableData: [],
      total: 0,
      page: 1,
      /**
       * 表格列项数据 (必传)
       * label 表格列项名称
       * prop: ''
       * width 列项宽度
       * align       内容对齐方式 (默认居中)
       * headerAlign 表头对齐方式 (默认居中)
       * columnType  是否开启插槽
       * soltName    插槽名
       */
      tableColumnOptions: [
        { label: '账号', prop: 'username' },
        { label: '用户名', prop: 'nickname' },
        { label: '登录时间', prop: 'logintime' }
      ]
    }
  },
  created () {
    this.getAccountList()
  },
  methods: {
    selectionChange (e) {
      console.log('选择框改变时：', e)
    },
    tableUpdate (e) {
      console.log('表格发生变化时', e)
      this.page = e.currentPage
      this.getAccountList()
    },
    tableRowEdit (e) {
      console.log('拿到此行的数据', e)
    },
    async getAccountList () {
      const res = await getAccountList({ page: this.page })
      this.tableData = res.data.data
      this.total = res.data.total
    }
  }
}
</script>

<style></style>
